
<template>
  <div class="login">

    <el-form :model="form" label-width="120px" label-position="top" :rules="rules" ref="formRef">
      <h2 style="text-align: center">登录</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="isLoading">登录</el-button>
<!--        <el-button>注册</el-button>-->
      </el-form-item>
    </el-form>
  </div>

</template>


<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'


const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' },
  ]
})

const formRef = ref<FormInstance>()

//会有加载中的效果转圈圈 避免重复点击
const isLoading = ref(false)
// do not use same name with ref
const form = reactive({
  username: '',
  password: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})



const router = useRouter()

const store = useTokenStore()




import request from '@/utils/request.ts'
import { login } from '@/api/users.ts'
import { useTokenStore } from '@/stores/myToken.ts'
const onSubmit = async () => {
  //避免重复多次点击
  isLoading.value = true //开启加载状态
  formRef.value?.validate().catch((err)=>{
    ElMessage.error("表单校验失败")
    isLoading.value = false //关闭加载状态
    throw err
    //判定状态如果成功才会执行下面的
    // return new Promise(() => {})
  })


  console.log("登录")

  //发送登录请求
  const data = await login(form).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("登录成功")
      router.push('/category/list')
      return res.data
    } else {
      console.log("false了")
      ElMessage.error("登录失败")
    }
  })
  store.saveToken(data?.data)
  // console.log("tokenx:"+store.saveToken(data?.data))
  isLoading.value = false //关闭加载状态
  console.log(data)


  // const res = request({
  //   url: '/api/user/login',
  //   method: 'post',
  //   data: form
  // }).then((res)=> {
  //   if (res.data.code == 200){
  //     ElMessage.success("登录成功")
  //     router.push('/category/list')
  //   }else {
  //     ElMessage.error("登录失败")
  //   }
  // })
  // if (form.username == "admin" && form.password == "123456") {
  //
  //   //router.push('/category/list')
  //   ElMessage.success("登录成功")
  //   console.log("逃跑成功")
  // }else {
  //   ElMessage.error("登录失败")
  //   console.log("逃跑失败")
  // }

}
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ccc;
  .el-form {
    width: 300px;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    .el-form-item {
      margin-top: 20px;
      .el-button{
        width: 80%;
        margin-left: 10%;
      }
    }
  }
}


</style>
